<template>
  <el-drawer
    ref="flowApproverDrawer"
    v-model="visible"
    direction="rtl"
    :before-close="handleClose"
  >
    <template #header>
      <span class="flow-ant-drawer-title">
        <el-icon><EditPen /></el-icon>
        <!-- <EditName v-model:value="node.name" /> -->
        <el-input
          ref="imputRef"
          v-if="isInput"
          type="text"
          autofocus
          @blur="isInput = false"
          v-model="node.name"
          :style="{ width: width }"
        />
        <span v-else @click.stop="clickEvent()">{{ node.name }}</span>
      </span>
    </template>

    <div class="flow-setting-module">
      <!-- 办理人设置 -->
      <div v-if="node.type == 6" class="flow-setting-content">
        <div class="flow-setting-item">
          <p class="flow-setting-item-title">办理人设置</p>
          <el-alert
            message="当流程中某个节点不需要审批，但需要对审批单进行业务办理时，可设置办理人节点，场景如财务打款、处理盖章等"
            type="info"
          />
        </div>
      </div>

      <el-tabs>
        <el-tab-pane key="1" label="审批设置">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <!-- 审批人类型 -->
              <el-radio-group
                v-model="node.config.assignedType"
                class="w-fill"
                :size="size"
                @change="changeApproverType(node.config)"
              >
                <el-radio
                  v-for="(approval, i) in approvals"
                  :key="i"
                  :label="approval.value"
                  :disabled="approval.disabled"
                >
                  <span>{{ approval.name }}</span>
                </el-radio>
              </el-radio-group>

              <!-- 上级 -->
              <div v-if="node.config.assignedType === 'LEADER'">
                <p class="flow-setting-item-title">
                  <span>指定层级</span>
                </p>
                <el-radio-group
                  :size="size"
                  v-model="node.config.leader.level"
                  class="w-fill"
                >
                  <el-radio
                    v-for="(higherLevel, i) in higherLevelModes"
                    :key="i"
                    :label="higherLevel.value"
                  >
                    <span>{{ higherLevel.name }}</span>
                  </el-radio>
                </el-radio-group>
                <FlowSelect
                  v-model="node.config.approverIds"
                  :name="node.config.approverNames"
                  @update:name="node.config.approverNames = $event"
                  :datas="higherLevels"
                />
              </div>

              <!-- 角色 -->
              <div v-if="node.config.assignedType === 'ROLE'">
                <p class="flow-setting-item-title">
                  <span>选择角色</span>
                </p>
                <FlowSelect
                  v-model="node.config.role"
                  :name="node.config.role"
                  @update:name="node.config.role = $event"
                  :datas="roles"
                />
              </div>

              <!-- 岗位 -->
              <div v-if="node.config.assignedType === 'POST'">
                <p class="flow-setting-item-title">
                  <span>选择岗位</span>
                </p>
                <FlowSelect
                  v-model="node.config.approverIds"
                  :name="node.config.approverNames"
                  @update:name="node.config.approverNames = $event"
                  :datas="posts"
                />
              </div>

              <!-- 指定成员 -->
              <div v-if="node.config.assignedType === 'ASSIGN_USER'">
                <p class="flow-setting-item-title">
                  <span>指定成员</span>
                  <span class="light-text">(不能超过 25 人)</span>
                  <UserSelector
                    type="button"
                    :title="指定成员"
                    @copyData="copyData"
                    :multiple="true"
                    :user-list="node.config.assignedUser"
                    :tableData="node.config.assignedUser"
                  />
                </p>
              </div>

              <!-- 发起人自选 -->
              <div v-if="node.config.assignedType === 'SELF_SELECT'">
                <p class="flow-setting-item-title">
                  <span>选择方式</span>
                </p>
                <el-radio-group
                  :size="size"
                  class="w-fill"
                  v-model="node.config.selfSelect.multiple"
                >
                  <el-radio label="false">
                    <span>多选</span>
                  </el-radio>
                  <el-radio label="true">
                    <span>单选</span>
                  </el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- 审批方式 -->
            <div v-if="node.type == 1" class="flow-setting-item margin-top-10">
              <p class="flow-setting-item-title">
                <span>多人审批时审批方式</span>
              </p>
              <el-radio-group v-model="node.config.approvalMode" :size="size">
                <el-radio
                  v-for="(sameApproval, i) in approvalModes"
                  :key="i"
                  :label="sameApproval.value"
                >
                  <span>{{ sameApproval.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>

            <!-- 审批人为空时 -->
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">
                <span>{{ node.type == 1 ? "审批人" : "办理人" }}为空时</span>
              </p>
              <el-radio-group v-model="node.config.nobody.handler" :size="size">
                <el-radio
                  v-for="(approvalWithNull, i) in approvalWithNulls"
                  :key="i"
                  :label="approvalWithNull.value"
                >
                  <span>{{ approvalWithNull.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>

            <div class="flow-setting-item">
              <p class="flow-setting-item-title">
                <span>如果审批被驳回</span>
              </p>
              <el-radio-group v-model="node.config.reject.type" :size="size">
                <el-radio
                  v-for="(refuse, i) in refuses"
                  :key="i"
                  :label="refuse.value"
                >
                  <span>{{ refuse.name }}</span>
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane key="2" label="表单权限">
          <div class="flow-setting-content">
            <div class="flow-setting-item">
              <p class="flow-setting-item-title">表单权限</p>
              <AuthForm v-model:value="node.config.formPerms" readable />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane key="3" label="高级设置">
          <FlowOperationButton v-model:value="node.config.configure" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <p>{{ node }}</p>
    <!-- <FlowDrawerFooter @close="onClose" @save="onSave" /> -->
  </el-drawer>
</template>
<script setup name="FlowApproverDrawer">
import FlowOperationButton from "./FlowOperationButton.vue";
import AuthForm from "../../../common/FormAuthConfig.vue";
import EditName from "../../../common/EditName.vue";
//import AuthForm from "../../../common/AuthForm.vue";
import UserSelector from "../../../common/OrgPicker.vue";
import {
  reactive,
  ref,
  createApp,
  nextTick,
  watch,
  computed,
  onMounted,
  toRefs,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
const emit = defineEmits(["close"]);

const node = ref({});
const visible = ref(false);

const size = ref("default");
const isInput = ref(false);
const imputRef = ref();
const approvalModes = reactive([
  {
    name: "多人会签(一人通过再到下一个人处理)",
    value: "NEXT",
  },
  {
    name: "多人会签(所有人都通过才到下一个环节)",
    value: "AND",
  },
  {
    name: "多人或签(一人通过或否决)",
    value: "OR",
  },
]);

const approvalWithNulls = reactive([
  {
    name: "自动通过",
    value: "AUTO",
  },
  {
    name: "指定人员审批",
    value: "TO_USER",
  },
  {
    name: "转交给审批管理员",
    value: "TO_ADMIN",
  },
  {
    name: "自动拒绝",
    value: "REFUSE",
  },
]);

const refuses = reactive([
  {
    name: "直接结束流程",
    value: "TO_END",
  },
  {
    name: "指定节点",
    value: "TO_NODE",
  },
  {
    name: "上一节点",
    value: "TO_BEFORE",
  },
]);

const approvals = reactive([
  {
    name: "发起人上级",
    value: "LEADER",
  },
  {
    name: "系统角色",
    value: "ROLE",
  },
  {
    name: "系统岗位",
    value: "POST",
  },
  {
    name: "指定成员",
    value: "ASSIGN_USER",
  },
  {
    name: "发起人自选",
    value: "SELF_SELECT",
  },
  {
    name: "发起人自己",
    value: "SELF",
  },
]);
// 上级方式
const higherLevelModes = reactive([
  {
    name: "自下而上（以发起人的直属上级为第一级）",
    value: 1,
  },
  {
    name: "自上而下（以公司的最高上级为第一级）",
    code: "higherLevel",
    value: 2,
  },
]);
// 上级层级
const higherLevels = reactive([
  {
    name: "直属上级",
    value: "1",
  },
  {
    name: "第二级上级",
    value: "2",
  },
  {
    name: "第三级上级",
    value: "3",
  },
  {
    name: "第四级上级",
    value: "4",
  },
  {
    name: "第五级上级",
    value: "5",
  },
  {
    name: "第六级上级",
    value: "6",
  },
  {
    name: "第七级上级",
    value: "7",
  },
  {
    name: "第八级上级",
    value: "8",
  },
  {
    name: "第九级上级",
    value: "9",
  },
  {
    name: "第十级上级",
    value: "10",
  },
  {
    name: "第十一级上级",
    value: "11",
  },
  {
    name: "第十二级上级",
    value: "12",
  },
]);
// 角色
const roles = reactive([
  {
    name: "人事",
    value: "1",
  },
  {
    name: "行政",
    value: "2",
  },
  {
    name: "招聘",
    value: "3",
  },
  {
    name: "财务",
    value: "4",
  },
  {
    name: "法务",
    value: "5",
  },
  {
    name: "经理",
    value: "6",
  },
]);
// 岗位
const posts = reactive([
  {
    name: "技术顾问",
    value: "1",
  },
  {
    name: "HRBP",
    value: "2",
  },
  {
    name: "部门助理",
    value: "3",
  },
  {
    name: "行政专员",
    value: "4",
  },
  {
    name: "商务专员",
    value: "5",
  },
  {
    name: "现场助理",
    value: "6",
  },
  {
    name: "项目经理",
    value: "7",
  },
  {
    name: "薪酬专员",
    value: "8",
  },
  {
    name: "招聘专员",
    value: "9",
  },
  {
    name: "考勤专员",
    value: "10",
  },
  {
    name: "副总经理",
    value: "11",
  },
]);

const afterVisibleChange = (val) => {
  console.log("visible", val);
};

const showDrawer = (data) => {
  console.log("data------------>", JSON.stringify(data));
  node.value = data;
  visible.value = true;
  console.log("成功还是失败", JSON.stringify(visible));
};

defineExpose({
  showDrawer,
});

const onClose = () => {
  console.log("不关闭?");
  visible.value = false;
  emit("close");
};

const handleClose = () => {
  // 更新节点显示信息
  let content = "";
  node.value.config.assignedUser.forEach((item) => {
    if (item.username && content) {
      content += ",";
    }
    content += item.username;
    console.log("-----------", content);
  });
  console.log("-----content---->", content);
  if (content) {
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "content",
      value: content,
    });
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "error",
      value: false,
    });
  } else {
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "content",
      value: null,
    });
    store.dispatch("process/updateNode", {
      currNode: node.value,
      field: "error",
      value: true,
    });
  }
  onClose();
};

const showMode = () => {
  switch (node.value.config.assignedType) {
    case "ASSIGN_USER":
      return node.value.config.length > 0;
    case "SELF_SELECT":
      return this.nodeProps.selfSelect.multiple;
    case "LEADER_TOP":
      return this.nodeProps.formUser !== "";
    case "FORM_USER":
      return true;
    case "ROLE":
      return true;
    default:
      return false;
  }
};

const changeApproverType = (group) => {
  group.approverIds = [];
  group.approverNames = [];
};
// 添加审批人
const addApproval = () => {
  this.groups.push({
    id: this.uuid(),
    // 审批人模式
    approverType: 1,
    // 层级模式
    levelMode: 1,
    // 审批人ID
    approverIds: [],
    // 审批人名称
    approverNames: [],
  });
};
// 删除审批人
const delApproval = (group) => {
  this.groups.forEach((element, i) => {
    if (element.id == group.id) {
      this.groups.splice(i, 1);
    }
  });
};

const copyData = (data) => {
  console.log(
    "<---------------------是这个意思吗-------------------->",
    JSON.stringify(data)
  );
  node.value.config.assignedUser = data;
};
const clickEvent = () => {
  isInput.value = true;
};

watch(isInput, () => {
  if (isInput.value) {
    nextTick(() => {
      imputRef.value.focus();
    });
  }
});
</script>
